@import "/var/www/html/wp-content/themes/all-things-metal-atm/assets/scss/block-dependencies";
.b_share
{
	width: auto;
	position: relative;
    position: fixed;
    top: calc(50% - 200px);
    z-index: 9;

	.shared-set-share-2
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;

		.center-area-6
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			position: relative;
			flex: 0 0 auto;
			order: 0;
		}

		.icon-6
		{
			width: 22px;
            max-height: 28px;
			position: relative;
			flex: 0 0 23px;
			object-fit: contain;
			order: 0;
		}

		span.label-6
		{
			position: relative;
			width: 134px;
			color: var(--color-neutrals-black);
			font-family: "Instrument Sans";
			font-style: normal;
			font-size: 16px;
			font-weight: 600;
			line-height: normal;
			letter-spacing: 0.01em;
			text-align: center;
			order: 1;
		}

		&:hover .vector-12
		{
			display: none;
		}

		&:hover .vector-13
		{
			display: none;
		}
	}

    .expand-button
    {
        display: flex;
        align-items: flex-start;
        position: relative;
        flex: 0 0 auto;
        order: 0;
    }

    .content-5
    {
        display: flex;
        padding: 10px 6px 10px 30px;
        justify-content: center;
        align-items: center;
        gap: 2px;
        position: relative;
        flex: 0 0 auto;
        background-color: var(--color-neutrals-light-gray);
        order: 0;
    }

    span.share-8
    {
        position: relative;
        margin-block: -4px -4px;
        color: var(--color-neutrals-black);
        font-style: normal;
        font-weight: 600;
        order: 0;
    }

    .icon-wrapper-5
    {
        transform: rotate(90deg);
        display: flex;
        flex-direction: column;
        height: 30px;
        justify-content: center;
        align-items: center;
        position: relative;
        flex: 0 0 30px;
        flex-shrink: 0;
        overflow: clip;
        order: 1;
    }

    .icon-arrow-right-5
    {
        width: 10px;
        position: relative;
        flex: 0 0 17px;
        flex-shrink: 0;
        overflow: clip;
        object-fit: contain;
        order: 0;
    }

    .endcap-5
    {
        transform: scaleY(-1);
        height: 50px;
        position: relative;
        flex: 0 0 12px;
        flex-shrink: 0;
        object-fit: contain;
        order: 1;
    }

    .dropdown-3
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: relative;
        flex: 0 0 auto;
        overflow: clip;
        background-color: var(--color-neutrals-light-gray);
        order: 1;
    }

    .divider-5
    {
        display: flex;
        width: 110px;
        justify-content: center;
        align-items: center;
        position: relative;
        flex: 0 0 2px;
        flex-shrink: 0;
        background-color: var(--color-neutrals-gray);
    }

    .share-link
    {
        width: 130px;
        position: relative;
        flex: 0 0 80px;
        flex-shrink: 0;
    }

    .divider-6
    {
        display: flex;
        width: 110px;
        justify-content: center;
        align-items: center;
        position: relative;
        flex: 0 0 2px;
        flex-shrink: 0;
        background-color: var(--color-neutrals-gray);
        order: 2;
    }

    &[data-state="collapsed"]
    {
        display: flex;
        align-items: center;
    }

    &[data-state="collapsed"] .vector-9-5
    {
        display: none;
    }

    &[data-state="collapsed"] .dropdown-3
    {
        display: none;
    }

    &[data-state="expanded"]
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    &[data-state="expanded"] .vector-9-5
    {
        display: none;
    }

    div.expand-button { display: none; }

    @media screen and (max-width:1199px)
    {
        bottom: 0;
        top:auto;
        width: 100%;
        display:flex;

        button.expand-button { display: none; }
        div.expand-button { display: block; }

        .dropdown-3
        { 
            display: flex !important;
            width: 100%;
            flex-direction: row;
            gap: 40px;
            height: 70px
        }

        .share-link
        {
            flex: 0 1 22px;
        }

        span.label-6 { display: none; }

        .divider-5 { display: none; }

    }
}